<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        ajax：async javascript and xml（异步的JavaScript和xml）
        ajax可以直接在这个html页面中获取php的数据，不用跳转的php页面中
        ajax的优点：
            【1】无需刷新页面 因为它是异步的
            【2】按需加载，减轻服务器的压力
            【3】实时更新
            【4】提高用户体验
        
        使用ajax步骤：
            【1】创建ajax对象
                let ajax = new XMLHttpRequest();
            【2】设置请求的方式和请求的地址
                XMLHttpRequest里面有个open的方法
                ajax.open(参数1，参数2，参数3);
                参数1 === 请求的方式 get || post
                参数2 === 请求的地址 xxxx.php
                参数3 === 布尔值 true || false   默认为true 是表示异步请求  false是表示同步请求
            【3】发送请求 这个是属于 异步 步骤
                XMLHttpRequest中有个send的方法
                ajax.send();
            【4】请求到的结果返回给前端
                XMLHttpRequest 对象中有一个readyState（状态码），当每次readyState不一样的时候，就会触发一个事件 onreadystatechange
        
            readyState ajax状态码
                0 --- 初始化ajax 
                1 --- 当调用了open()方法
                2 --- send()之后，得到的相应信息
                3 --- 得到信息之后，解析数据（少的话 很快就解析完也会输出—）
                4 --- 数据解析完成，前端可以正常时候该数据

            status HTTP的状态码
                2 --- 表示成功
            ajax.onreadystatechange = function(){
                 当ajax的状态码为4 并且 http的请求状态码为2开头的就可以获取数据
                if(ajax.readyState == 4 && /^2\d{2}.test(ajax.status)$/){
                    输出数据
                    console.log(ajax.responseText);
                }
            }
            ***多数用这个
            只有当ajax的状态码为 4 时 才会执行
            ajax.onload()=function(){};
        */

        let ajax = new XMLHttpRequest();
        ajax.open('get','../1.3.connect.php');
        ajax.send();
        ajax.onload=function(){
            console.log(ajax.responseText);
        }





    </script>
</body>
</html>